/* eslint-disable no-plusplus */
import React, { useState } from 'react'
import { Image, Text, View } from '@tarojs/components'
import { ChoiceITF } from '@INTERFACES/Survey'
import Images from '@ASSET/Images'
import { LanguageType } from '@INTERFACES/Common'
import style from './ExpandTree.module.scss'

interface Props {
  data: ChoiceITF[],
  language: LanguageType,
  answerChoice?: ChoiceITF,
  onClickChoice: (item: ChoiceITF) => void,
  containerClass?: string,
  itemClass?: string,
  subContentClass?: string,
  lastNoBorder: boolean,
}

interface ChoiceItemProps {
  data: ChoiceITF,
  language: LanguageType,
  isSelect: boolean,
  answerChoice?: ChoiceITF,
  onClickChoice: (item: ChoiceITF) => void,
  itemClass?: string,
  subContentClass?: string,
  isLast: boolean,
  lastNoBorder: boolean,
}

interface SubChoiceItemProps {
  data: ChoiceITF[],
  answerChoice?: ChoiceITF,
  language: LanguageType,
  onClickChoice: (item: ChoiceITF) => void,
  subContentClass?: string,
}

const SubChoiceItem: React.FC<SubChoiceItemProps> = ({ data, language, answerChoice, onClickChoice, subContentClass }) => (
  <View className={style.subContainer}>
    <View className={style.line} />
    <View className={`${style.subContent} ${subContentClass}`}>
      {Array.isArray(data) && data?.map((item, index) => {
        const { Text: subText, Label } = item
        const isSelect = answerChoice?.Label === Label
        return (
          <View
            className={`${style.subItem} ${isSelect ? style.subItemSelect : ''}`}
            key={Label}
            onClick={() => onClickChoice?.(item)}
          >
            <Image
              className={style.subIcon}
              src={isSelect ? Images.patient.decision_selected : Images.patient.decision_unselect}
            />
            <Text className={style.subItemText}>{subText?.[language]}</Text>
          </View>
        )
      })}
    </View>
  </View>
)
const ChoiceItem: React.FC<ChoiceItemProps> = ({
  data, language, isSelect, answerChoice, onClickChoice,
  itemClass, subContentClass, lastNoBorder, isLast }) => {
  const { SubChoices = [], Text: labelText } = data || {}
  const [isExpand, setExpand] = useState(isSelect || false)
  let iconExpand = Images.survey.icon_expand_tree_normal
  if (isSelect) {
    iconExpand = Images.survey.icon_expand_tree_selected
  }
  if (isExpand) {
    iconExpand = Images.survey.icon_expand_tree_expand
  }
  const onClickExpand = () => {
    if (!Array.isArray(SubChoices) || SubChoices?.length === 0) return
    setExpand(!isExpand)
  }
  const lastNoBorderStyle = isLast && lastNoBorder ? style.borderBottom0 : ''
  return (
    <View>
      <View
        className={`${style.itemContainer} ${isExpand ? style.expandItemContainer : ''} ${itemClass} ${lastNoBorderStyle}`}
        onClick={onClickExpand}
      >
        <Image src={iconExpand} className={style.iconExpandLeft} />
        <Text className={`${style.itemText} ${isExpand ? style.itemBoldText : ''}`}>
          {labelText[language]}
        </Text>
        <Text className={`${style.itemText} ${style.selectText}`}>
          {isSelect ? `(${answerChoice?.Text?.[language]})` : ''}
        </Text>
        <Image src={isExpand ? Images.survey.icon_survey_arrow_up : Images.survey.icon_survey_arrow_down} className={style.iconArrowDown} />
      </View>
      {isExpand ? (
        <SubChoiceItem
          subContentClass={subContentClass}
          data={SubChoices}
          language={language}
          answerChoice={answerChoice}
          onClickChoice={onClickChoice}
        />
      ) : null}
    </View>
  )
}
const getSelectIndex = (choices: ChoiceITF[], answerChoice?: ChoiceITF) => {
  if (!answerChoice) return -1
  for (let i = 0; i < choices.length; i++) {
    const { SubChoices = [] } = choices[i]
    for (let j = 0; j < SubChoices.length; j++) {
      const { Label } = SubChoices[j]
      if (answerChoice.Label === Label) return i
    }
  }
  return -1
}
const ExpandTree: React.FC<Props> = ({ data, language = 'zh',
  answerChoice, onClickChoice, lastNoBorder,
  containerClass,
  itemClass, subContentClass }) => {
  const selectedIndex = getSelectIndex(data, answerChoice)
  return (
    <View className={`${style.container} ${containerClass}`}>
      {data?.map((item: ChoiceITF, index: number) => {
        const isSelect = selectedIndex === index
        const isLast = index === data?.length - 1
        return (
          <ChoiceItem
            key={item.Label}
            isLast={isLast}
            data={item}
            lastNoBorder={lastNoBorder}
            itemClass={itemClass}
            subContentClass={subContentClass}
            language={language}
            isSelect={isSelect}
            answerChoice={answerChoice}
            onClickChoice={onClickChoice}
          />
        )
      })}
    </View>
  )
}
export default ExpandTree
